<template>
    <view class="main-container">
        <scroll-view scroll-y class="sub-nav" :show-scrollbar="false" scroll-with-animation>
            <view class="menu">
                <block v-for="(item, index) in categoriesList" :key="index">
                    <view :class="current == index ? 'menus' : ''" @click="qiecate(index)"
                        ><text
                            style="
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 1;
                                overflow: hidden;
                            "
                            :class="current == index ? 'active' : ''"
                            >{{ item.name }}</text
                        ></view
                    >
                </block>
            </view>
        </scroll-view>
        <scroll-view scroll-y class="Classify-list" scroll-with-animation="true" :scroll-into-view="scrollIntoView">
            <block v-for="(item, index) in categoriesList" :key="index">
                <view class="Classify_main1" :name="item.name" :id="'scroll' + index">
                    <view class="Classify-title">{{ item.name }}</view>

                    <view class="Classify-content">
                        <block v-for="(items, indexs) in item.childs" :key="indexs">
                            <view @click="selSecondCategoryId(items)" class="Classify-item">
                                <view class="img">
                                    <image
                                        style="width: 100%; height: 100%; background-color: #eaeaee"
                                        :src="items.imageAbsolute"
                                    ></image>
                                </view>
                                <view class="name">{{ items.name }}</view>
                            </view>
                        </block>
                    </view>
                </view>
            </block>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            categoriesList: [],
            current: 0,
            scrollTop: 0,
            scrollIntoView: '',
            menuHeight: 0, // 左边菜单的高度
            menuItemHeight: 0,
        };
    },

    onLoad() {
        this.getMallcategories();
    },
    methods: {
        selSecondCategoryId(item) {
            uni.$emit('mallCategory', item);
            uni.navigateBack();
        },
        async qiecate(e) {
            if (e == this.current) return;
            this.current = e;
            this.scrollIntoView = 'scroll' + e;
            // 如果为0，意味着尚未初始化
            if (this.menuHeight == 0 || this.menuItemHeight == 0) {
                await this.getElRect('sub-nav', 'menuHeight');
                await this.getElRect('Classify_main1', 'menuItemHeight');
            }
            // 将菜单菜单活动item垂直居中
        },
        getMallcategories() {
            this.request.httpTokenJsonRequest('/mp-api/wx/goods/categories', null, 'POST', false).then((res) => {
                if (res.code == 0) {
                    this.categoriesList = res.data.list;
                }
            });
        },
        getElRect(elClass, dataVal) {
            new Promise((resolve, reject) => {
                const query = uni.createSelectorQuery().in(this);
                query
                    .select('.' + elClass)
                    .fields(
                        {
                            size: true,
                        },
                        (res) => {
                            // 如果节点尚未生成，res值为null，循环调用执行
                            if (!res) {
                                setTimeout(() => {
                                    this.getElRect(elClass);
                                }, 10);
                                return;
                            }
                            this[dataVal] = res.height;
                        },
                    )
                    .exec();
            });
        },
    },
};
</script>

<style>
</style>
